.c-red {
  color: red;
}
.c-999 {color: #999;}
.c-333 {color: #333;}
.c-ff3102 {color: #ff3102;}
.c-c8c9cc {color: #c8c9cc;}

@fzList: 12,14,16,18,20,24,32;
.fz-loop(@list,@i:1,@val:extract(@list,@i)) when (length(@list)>=@i) {
  .fz-@{val} {font-size: ~'@{val}px;'}
  .fz-loop(@list, (@i+1));
}
.fz-loop(@fzList);

.fw-bold {font-weight: bold;}

.ta-c {text-align: center;}
.ta-l {text-align: left;}

@mgList: 0,5,10,15,20,30,40,60,80,100,200;
.mg-loop(@list,@i:1,@val:extract(@list,@i)) when (length(@list)>=@i) {
  .mb-@{val} {margin-bottom: ~'@{val}px;'}
  .mt-@{val} {margin-top: ~'@{val}px;'}
  .ml-@{val} {margin-left: ~'@{val}px;'}
  .mr-@{val} {margin-right: ~'@{val}px!important;'}
  .mg-@{val} {margin: ~'@{val}px;'}
  .mtb-@{val} {margin: ~'@{val}px 0;'}
  .mlr-@{val} {margin: 0 ~'@{val}px;'}
  .pb-@{val} {padding-bottom: ~'@{val}px;'}
  .pt-@{val} {padding-top: ~'@{val}px;'}
  .pl-@{val} {padding-left: ~'@{val}px;'}
  .pr-@{val} {padding-right: ~'@{val}px!important;'}
  .pd-@{val} {padding: ~'@{val}px;'}
  .ptb-@{val} {padding: ~'@{val}px 0;'}
  .plr-@{val} {padding: 0 ~'@{val}px;'}
  .mg-loop(@list, (@i+1));
}
.mg-loop(@mgList);


@wdList: 50,100,120,150,200,240,280,300;
.wd-loop(@list,@i:1,@val:extract(@list,@i)) when (length(@list)>=@i) {
  .w-@{val} {width: ~'@{val}px;'}
  .h-@{val} {width: ~'@{val}px;'}
  .wd-loop(@list, (@i+1));
}
.wd-loop(@wdList);
.wd-100p {width: 100%;}

.d-f {display: flex;}
.d-ib {display: inline-block;}

.p-a {position: absolute;}
.p-r {position: relative;}

.d-if-ac {
  display: inline-flex;
  align-items: center;
}